@extends('layouts.app')

@section('title', '商品列表')
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">商品列表</div>

                    <div class="panel-body">

                        <form action="{{route('products.index')}}" class="search-form form-inline" style="padding:5px 5px 0 5px">
                            <input name="search" type="text" class="form-control input-sm" placeholder="搜索">
                            <button type="submit" class="btn btn-primary btn-sm">搜索</button>
                            <select name="order" class="form-control input-sm pull-right">
                                <option value="">排序方式</option>
                                <option value="price_asc">价格从低到高</option>
                                <option value="price_desc">价格从高到低</option>
                                <option value="sold_count_asc">销量从低到高</option>
                                <option value="sold_count_desc">销量从高到低</option>
                                <option value="review_count_asc">评价从低到高</option>
                                <option value="review_count_desc">评价从高到低</option>
                            </select>
                        </form>

                        <div class="row products-list">
                            @foreach($products as $product)
                                <div class="col-xs-3 product-item">
                                    <div class="product-content">
                                        <div class="top">
                                            <div class="img"><a href="{{route('products.show', $product->id)}}"><img src="{{ $product->image }}" alt=""></a></div>
                                            <div class="price"><b>￥</b>{{ $product->price }}</div>
                                            <div class="title">{{ $product->title }}</div>
                                        </div>
                                        <div class="bottom">
                                            <div class="sold_count">销量 <span>{{ $product->sold_count }}笔</span></div>
                                            <div class="review_count">评价 <span>{{ $product->review_count }}</span></div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="pull-right" style="margin-right:5px">{{$products->appends($filters)->render()}}</div>


                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('body')
    <script>
        $('.search-form select[name=order]').change(function(){
            $('.search-form').submit();
        })
    </script>
@endpush

@push('body')
    <script>
        var filters= {!! json_encode($filters) !!}
        $('.search-form select[name=order]').val(filters.order);
        $('.search-form input[name=search]').val(filters.search);
    </script>
@endpush